<!DOCTYPE html>

<html> 
<head> 
    <meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>C333 Awesome Menu V3</title>
    <meta name="description" content="CSS3 Awesome Menu is completely coded using CSS3 and Icon Fonts. No JavaScript are involved. This menu is inspired by the menu from the Google Nexus Site"> 

    <!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	
	<!-- Importing Stylesheets -->
    <link rel='stylesheet' href='css/icomoon.css' type='text/css' media='all'>
 
    <link rel='stylesheet' href='css/jquery.mCustomScrollbar.css' type='text/css' media='all'>
    <link rel='stylesheet' href='css/orange.css' type='text/css' media='screen'>
  

    
	
 
</head>
<body>
	
	<header class="css3aw-theme-dark">

		<div id="css3aw-main-menu-wrapper">
			<div id="css3aw-menu-trigger-icon">
				<span class="css3aw-menu-dash"></span>
				<span class="css3aw-menu-dash"></span>
				<span class="css3aw-menu-dash"></span>
			</div>
			
			<div id="css3aw-main-menu-container">
				<ul id="css3aw-menu">
					<li><a href="#"><span aria-hidden="true" class="icon-home"></span>HOME</a></li>
					<li class="css3aw-has-submenu"><a href="#"><span aria-hidden="true" class="icon-pencil-2"></span>Truyện</a>
						<ul>
							<li>
								<div>
									<h1>Heading Style 1</h1>
									<p> Et dictumst porta et mid, <a href="#">tincidunt</a>, porta urna lectus, nec ultrices cursus tortor hac, dignissim duis nec, turpis, pulvinar nec porta! Vel phasellus.</p>
									<hr>

									<h4>Heading Style 2</h4>
									<p> Et dictumst porta et mid, <a href="#">tincidunt</a>, porta urna lectus, nec ultrices cursus tortor hac, dignissim duis nec, turpis, pulvinar nec porta! Vel phasellus.</p>
									<hr>
									
									<h4>Bordered Paragraphs</h4>
									<p class="bordered">Et dictumst porta et mid, <a href="#">tincidunt</a>, porta urna lectus, nec ultrices cursus tortor hac, dignissim duis nec, turpis, pulvinar nec porta! Vel phasellus.</p>

									<p class="bordered-hover">Et dictumst porta et mid, <a href="#">tincidunt</a>, porta urna lectus, nec ultrices cursus tortor hac, dignissim duis nec, turpis, pulvinar nec porta! Vel phasellus.</p>
									
								</div>
							</li>
						</ul>
					</li>
					<li class="css3aw-has-submenu"><a href="#"><span aria-hidden="true" class="icon-info"></span>Video - Music</a>
						<ul>
							<li><a href="#"><span aria-hidden="true" class="icon-user-2"></span>My-Self</a></li>
							<li><a href="#"><span aria-hidden="true" class="icon-users-2"></span>Our Team</a></li>
							<li><a href="#"><span aria-hidden="true" class="icon-stack"></span>History</a></li>
						</ul>
					</li>
					<li class="css3aw-has-submenu"><a href="#"><span aria-hidden="true" class="icon-star"></span>Blog</a>
						<ul>
							<li>
								<div>
									<h4>Unordered List</h4>
									<ul>
										<li>List Item</li>
										<li>List Item</li>
										<li>List Item</li>
										<li>List Item</li>
									</ul>

									<h4>Full Image</h4>
									<img class="css3aw-full-width" src="img/placeholder.jpg" alt="Placeholder Image">

									<h4>Thumbnail with Text</h4>
									<img class="css3aw-thumbnail" src="img/placeholder.jpg" alt="Placeholder Image">
									<p> Et dictumst porta et mid, <a href="#">tincidunt</a>, porta urna lectus, nec ultrices cursus tortor hac, dignissim duis nec, turpis, pulvinar nec porta! Vel phasellus.</p>
								</div>
							</li>
						</ul>
					</li>
					<li><a href="#"><span aria-hidden="true" class="icon-support"></span>Support</a></li>
					<li><a href="#"><span aria-hidden="true" class="icon-bubbles-4"></span>Community</a></li>
					<li><a href="#"><span aria-hidden="true" class="icon-phone"></span>Contact</a></li>
				</ul>
			</div>

		</div>
		
		<h3><a href="index.html">MONG.VN</a></h3>	

		<div id="css3aw-social-menu-wrapper">
			<span aria-hidden="true" class="icon-share"></span>
			<ul id="css3aw-social-menu">
				<li><a href="#"><span aria-hidden="true" class="icon-facebook"></span></a></li>
				<li><a href="#"><span aria-hidden="true" class="icon-twitter"></span></a></li>
				<li><a href="#"><span aria-hidden="true" class="icon-google-plus"></span></a></li>
				<li><a href="#"><span aria-hidden="true" class="icon-youtube"></span></a></li>
				<li><a href="#"><span aria-hidden="true" class="icon-dribbble"></span></a></li>
			</ul>
		</div>
		

	</header>

	


	<script type='text/javascript' src='js/jquery-1.10.2.min.js'></script>
	<script type='text/javascript' src='js/jquery.mCustomScrollbar.concat.min.js'></script>
	<script type='text/javascript' src='js/css3aw.js'></script>
	<script type='text/javascript'>
		$(window).load(function(){
			$("#css3aw-main-menu-container").mCustomScrollbar({
				advanced:{
			        updateOnContentResize: true
			    },
			    scrollButtons:{
					enable:true
				},
				theme:"light-thin",
				autoHideScrollbar: true,
				scrollInertia: 450
			});
		});
	</script>
    
</body> 
</html>
